import { useState, useEffect } from "react";
import { NavBar, Avatar, Card } from "antd-mobile";
import { UserOutline } from "antd-mobile-icons";
import style from "./index.module.css";
import { List } from 'antd-mobile'
import { SetOutline } from "antd-mobile-icons";
import img from "../../../public/img103.jpg";
import img2 from "../../../public/img203.jpg";
import img3 from "../../../public/img303.jpg";
import img4 from "../../../public/img403.jpg";
import img5 from "../../../public/img503.jpg";
import img6 from "../../../public/img603.jpg";
import { useNavigate } from "react-router-dom";
function Index() {
  const navigate = useNavigate()
  const [gdt, setgdt] = useState(0);

  useEffect(() => {
    const handleScroll = () => {
      setgdt(window.pageYOffset);
    };

    window.addEventListener("scroll", handleScroll);
    
    return () => {
      window.removeEventListener("scroll", handleScroll);
    };
  }, []);
  return (
    <div className={style.order}>
      <NavBar className={style.navar} right={ <SetOutline onClick={()=>navigate('/set')} fontSize={23} />} backIcon={false}>
        <span style={{ display: gdt <= 50 ? "none" : "block" }}>我的</span>
      </NavBar>

      <div className={style.user}>
        <Avatar className={style.avatar} src="" fallback={<UserOutline />} />
        <span>用户名</span>
       
      </div>

      <div className={style.memberBar}>
        <div className={style.memberInfo}>
          <span className={style.memberIcon}>👑</span>
          <span>会员</span>
        </div>
        <div className={style.benefitsBtn}>
          权益中心
        </div>
      </div>

      <div className={style.cards}>
        <Card className={style.span_card}>
          <img src={img} style={{ width: "30px", height: "30px" }} alt="" />
          <span>在线问诊</span>
        </Card>
        <Card className={style.span_card} onClick={()=>navigate('/DoorNew')}>
          {" "}
          <img src={img2} style={{ width: "30px", height: "30px" }} alt="" />
          <span>健康档案</span>
        </Card>
        <Card className={style.span_card}>
          {" "}
          <img src={img3} style={{ width: "30px", height: "30px" }} alt="" />
          <span>用药建议</span>
        </Card>
        <Card className={style.span_card} onClick={()=>navigate('/Houzhen')}>
          {" "}
          <img src={img4} style={{ width: "30px", height: "30px" }} alt="" />
          <span>优选订单</span>
        </Card>
        <Card className={style.span_card} onClick={()=>navigate('/DoorPay')}>
          {" "}
          <img src={img5} style={{ width: "30px", height: "30px" }} alt="" />
          <span>我的医生</span>
        </Card>
        <Card className={style.span_card} onClick={()=>navigate('/OpenOrder')}>
          {" "}
          <img src={img6} style={{ width: "30px", height: "30px" }} alt="" />
          <span>随访计划</span>
        </Card>
      </div>

      <List className={style.list_item}>
      <List.Item 
        arrowIcon={true} 
        extra={<span style={{fontSize: '18px', marginRight: '8px'}}>🛒</span>}
      >
        商城订单
      </List.Item>
      <List.Item arrowIcon={true}>挂号订单</List.Item>
      <List.Item arrowIcon={true}>收货地址</List.Item>
      <List.Item onClick={()=>navigate('/DaiJI')} arrowIcon={true}>我的卡券</List.Item>
      <List.Item arrowIcon={true}>门诊预约</List.Item>
      <List.Item arrowIcon={true}>商品收藏</List.Item>
      <List.Item arrowIcon={true}>价格公示</List.Item>
      <List.Item arrowIcon={true}>意见反馈</List.Item>
      <List.Item arrowIcon={true}>服务协议</List.Item>
      <List.Item arrowIcon={true}>隐私政策及简明版</List.Item>
      <List.Item arrowIcon={true}>关于我们</List.Item>
      <List.Item arrowIcon={true}>分享应用</List.Item>
    </List>

    <div className={style.serviceHotline}>
      服务热线: 400-078-1000
    </div>
    </div>
  );
}

export default Index;
